﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>TIZA STAR大数据运维总览图</title>
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	body{background-image: url(images/nybj.png);background-size:100% 100%;font-weight:bold;font-family:苹方;overflow: hidden;}
	.main{width:1024px;height:768px;position:relative;margin:auto;}
	div{border:0px solid white;margin:1px;}
	.layer{position:relative;width:100%;}
	#layer01{}
	#layer01 img{text-align: center;display: block;height: 35px;padding-top: 35px;margin: auto;}
	#layer02 > div{height:100%;float:left;position:relative;}
	.layer02-data{position: absolute;width: auto;height: 100px;color: white;top: 45px;left: 65px;}
	.layer03-panel{height:100%;position:relative;float:left;}
	.layer03-left-label{position:absolute;}
	#layer03_left_label01{top:10px;left:10px;color:white;height:20px;width:200px;font-weight: bold;}
	#layer03_left_label02{right:10px;top:10px;color:#036769;height:20px;width:200px;}
	.layer03-left-chart{position:relative;float:left;height:100%;}
	#layer03_right_label{position:absolute;top:10px;left:10px;color:white;height:20px;width:100px;}
	.layer03-right-chart{position:relative;float:left;height:100%;width:32%;}
	.layer03-right-chart-label{color: white;text-align: center;position: absolute;bottom: 60px;width: 100%;}
	.layer04-panel{position:relative;float:left;height:100%;width:48%;}
	.layer04-panel-label{width:100%;height:15%;color:white;padding-top:5px;}
	.layer04-panel-chart{width:100%;height:85%;}
  </style>
 </head>
 <body>
	 <div class="main">
		<!-- 概述 -->
		<div id="layer02" class="layer loadItem" data-url="data/countNum.json" data-type="count" style="height:15%;">
			<div id="layer02_01" style="width:20%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count0">0</span>
					<span style="font-size:16px;">台</span>
				</div>
				<canvas width="200" height="100"></canvas>
			</div>
			<div id="layer02_02" style="width:20%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count1">0</span>
					<span style="font-size:16px;">KB</span>
				</div>
				<canvas width="200" height="100"></canvas>
			</div>
			<div id="layer02_03" style="width:21%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count2">0</span>
					<span style="font-size:16px;">MB</span>
				</div>
				<canvas width="200" height="100"></canvas>
			</div>
			<div id="layer02_04" style="width:12%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count3">0</span>
					<span style="font-size:16px;">PB</span>
				</div>
				<canvas width="120" height="100"></canvas>
			</div>
			<div id="layer02_05" style="width:12%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count4">0</span>
					<span style="font-size:16px;">个</span>
				</div>
				<canvas width="120" height="100"></canvas>
			</div>
			<div id="layer02_06" style="width:12%;">
				<div class="layer02-data">
					<span style="font-size:26px;" class="_count5">0</span>
					<span style="font-size:16px;">个</span>
				</div>
				<canvas width="120" height="100"></canvas>
			</div>
		</div>
		<div id="layer03" class="layer" style="height:40%;">
			<div id="layer03_left" style="width:48%;" class="layer03-panel">
				<!-- 饼状图,data-color颜色，data-legend-style设置图例样式， data-ring环大小data-style percent显示百分比data-title设置title样式  -->
				<div class="loadItem" data-url="data/jixing.json" data-type="pie" data-color='["#0175EE","#D89446","#373693","#25AE4F","#06B5C6","#009E9A","#AC266F"]'
					data-legend-style="L,y:50,vertical" data-ring='[40, 80]' data-style="percent " data-title='{"text":"接入机型占比","left":"left","textStyle":{"color":"#fff"}}'
					style="height: 100%;"></div>
			</div>
			<div id="layer03_right" style="width:50%;" class="layer03-panel">
				<div id="layer03_right_label">存储</div>
				<div id="layer03_right_chart01" class="layer03-right-chart">
					<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
					<div class="layer03-right-chart-label">Hdfs</div>
				</div>
				<div id="layer03_right_chart02" class="layer03-right-chart">
					<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
					<div class="layer03-right-chart-label">Rdbms</div>
				</div>
				<div id="layer03_right_chart03" class="layer03-right-chart">
					<canvas width="130" height="150" style="margin:40px 0 0 20px;"></canvas>
					<div class="layer03-right-chart-label">Rdies</div>
				</div>
			</div>
		</div>
		<div id="layer04" class="layer" style="height:30%;">
			<div id="layer04_left" class="layer04-panel">
				<div id="layer04_left_label" class="layer04-panel-label">30天日均线流量趋势</div>
				<!-- 折线图， data-style="area smooth nospace"面积、平滑、两侧0空间， data-area-color渐变色冒号后面代表透明度-->
				<div class="layer04-panel-chart loadItem" data-url="data/liuliang.json" data-type="line" data-style="area smooth nospace" data-color="#009991"
					shieldSettings="{'xAxis': {'axisLabel':{'rotate':50}}}" data-axis-color="#fff" data-area-color="#026B6F>#012138:0.2"
					data-symbol="none" ></div>
			</div>
			<div id="layer04_right" class="layer04-panel">
				<div id="layer04_right_label" class="layer04-panel-label">
					<span>集群性能/</span><span style="color:#00A09A;">近一个小时</span>
				</div>
				<!-- 折线图,data-color颜色，data-grid位置，data-style="nospace"左右不留白 data-axis-color="#fff" 坐标轴颜色-->
				<div class="layer04-panel-chart loadItem" data-url="data/xingneng.json" data-type="line" data-color='["#F3891B","#006AD4","#009895"]'
					data-grid-style="right:16%" data-grid='{"top":"5%","right": "16%"}' data-style="nospace" data-axis-color="#fff" data-legend-style="RC,circle,vertical,color:white,right:5"></div>
			</div>
		</div>
	</div>
	
	 <script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script src="js/rem.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
	
  	<script type="text/javascript">
	  	function drawLayer02Label(canvasObj,text,textBeginX,lineEndX){
	  		var colorValue = '#04918B';
	
	  		var ctx = canvasObj.getContext("2d");
	
	  		ctx.beginPath();
	  		ctx.arc(35,55,2,0,2*Math.PI);
	  		ctx.closePath();
	  		ctx.fillStyle = colorValue;
	  		ctx.fill();
	
	  		ctx.moveTo(35,55);
	  		ctx.lineTo(60,80);
	  		ctx.lineTo(lineEndX,80);
	  		ctx.lineWidth = 1;
	  		ctx.strokeStyle = colorValue;
	  		ctx.stroke();
	
	  		ctx.font='12px Georgia';
	  		ctx.fillStyle = colorValue;
	  		ctx.fillText(text,textBeginX,92);
	  	}
	  	// canvasObj绘制的dom对象，colorValue为颜色，rate为占比
	  	function drawRingRate(canvasObj, colorValue, rate){
	  		var ctx = canvasObj.getContext("2d");
	  	    
	  		var circle = {
	  	        x : 65,    //圆心的x轴坐标值
	  	        y : 80,    //圆心的y轴坐标值
	  	        r : 60      //圆的半径
	  	    };

	  		//画扇形
	  		//ctx.sector(circle.x,circle.y,circle.r,1.5*Math.PI,(1.5+rate*2)*Math.PI);
	  		//ctx.fillStyle = colorValue;
	  		//ctx.fill();

	  		ctx.beginPath();
	  		ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2)
	  		ctx.lineWidth = 10;
	  		ctx.strokeStyle = '#052639';
	  		ctx.stroke();
	  		ctx.closePath();

	  		ctx.beginPath();
	  		ctx.arc(circle.x,circle.y,circle.r,1.5*Math.PI,(1.5+rate*2)*Math.PI)
	  		ctx.lineWidth = 10;
	  		ctx.lineCap = 'round';
	  		ctx.strokeStyle = colorValue;
	  		ctx.stroke();
	  		ctx.closePath();
	  	    
	  		ctx.fillStyle = 'white';
	  		ctx.font = '20px Calibri';
	  		ctx.fillText(rate*100+'%',circle.x-15,circle.y+10);

	  	}
		$(function(){
			drawLayer02Label($("#layer02_01 canvas").get(0),"接入终端数量",80,200);
			drawLayer02Label($("#layer02_02 canvas").get(0),"今日接入数据数量",80,300);
			drawLayer02Label($("#layer02_03 canvas").get(0),"今日新增存储数据",80,400);
			drawLayer02Label($("#layer02_04 canvas").get(0),"总存储数据",50,200);
			drawLayer02Label($("#layer02_05 canvas").get(0),"当前任务个数",40,200);
			drawLayer02Label($("#layer02_06 canvas").get(0),"当前集群数",50,200);
			
			//存储
			drawRingRate($("#layer03_right_chart01 canvas").get(0),"#027825",0.66);
			drawRingRate($("#layer03_right_chart02 canvas").get(0),"#006DD6",0.52);
			drawRingRate($("#layer03_right_chart03 canvas").get(0),"#238681",0.34);;
	
		});
  	</script>
 </body>
</html>
